import React, { Component } from 'react'
import './login.scss'
import { csGet, csSet } from '../../utils/cookie'
import { strWith } from '../../utils'
import { Button, Checkbox, Form, Icon, Input } from 'antd'
import logoLogin from '../../asset/img/logo-login.png'
import API from '../../ApiServer/Auth'

const FormItem = Form.Item
@Form.create()
export default class extends Component {
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        //登录请求参数
        let param = {
          loginName: values.userName,
          userPwd: values.password,
          loginType: 1,
          systemType: 2,
          needIdentifyCode: 0
        }
        let res = await API.login(param)
        if (res.status !== 2000) {
          this.setState({ errMsg: res.message })
          return false
        }
        //设置cookie
        csSet('X-AUTH-TOKEN', res.data.token, 1, '/', 'yimifudao.com')
        if (!csGet('X-AUTH-TOKEN')) {
          return false
        }
        //await msg.success('登录成功！', 2)
        if (strWith(window.location.href, '/login')) {
          history.back()
          return false
        }
        //刷新
        location.reload()
      }
    })
  }

  constructor(props) {
    super(props)
    this.state = {
      errMsg: ''
    }
  }

  //dd2w
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div className="login-page">
        <div className="login-header">
          <img src={logoLogin} alt="" className="logo-login" />
        </div>
        <div className="login">
          <div className="title-login">
            小班课管理系统
            {this.state.errMsg && <div className="login-err">{this.state.errMsg}</div>}
          </div>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: '请输入用户名！' }]
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="Username"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码！' }]
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="Password"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true
              })(<Checkbox>记住密码</Checkbox>)}

              <Button type="primary" htmlType="submit" className="login-form-button">
                登 录
              </Button>
            </FormItem>
          </Form>
        </div>
        <div className="footer-login">Copyright © 2015-2018 溢米辅导版权所有</div>
      </div>
    )
  }
}
